<template>
  <input class="input" :class="{error:!isOk}" :type="type" :placeholder="placeholder" @input="dataChange" @blur="showTip">
</template>

<script>
export default {
    props:[
        'type',
        'placeholder',
        'rules',
        'err_message'
    ],
    data(){
        return{
            isOk:true
        }
    },
    methods:{
        showTip(){
            if(!this.isOk){
                this.$toast.fail(this.err_message);
            }
        },
        dataChange($event){
            // console.log('数据有变化');
            // 根据传进来得到正则表达式检测数据是否正确
            if(!$event.target.value){
                this.isOk = true;
            }else{
                // 根据要求的表达式创建正则对象
                var regex = new RegExp(this.rules)
                // 将测试后结果存入到isOk
                // console.log($event.target.value)
                this.isOk = regex.test($event.target.value)
            }
            if(!this.isOk){
                console.log(this.err_message);
            }
            // 每次数据有变化后，传出去给父组件
            this.$emit('input', $event.target.value)
        }
    }
}
</script>

<style lang="less" scoped>
    .input{
        width: 100%;
        height: 38/360*100vw;
        padding: 20px;
        box-sizing: border-box;
        background: #ffffff;
        border: none;
        border-bottom: 1px #666 solid;
        outline: none;
    }
    .error{
        border-color: red;
    }
</style>